
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录</title>
<style type="text/css">
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-weight: 300;
}

body {
	font-family: 'Source Sans Pro', sans-serif;
	color: white;
	font-weight: 300;
}

body ::-webkit-input-placeholder {
	/* WebKit browsers */
	font-family: 'Source Sans Pro', sans-serif;
	color: white;
	font-weight: 300;
}

body :-moz-placeholder {
	/* Mozilla Firefox 4 to 18 */
	font-family: 'Source Sans Pro', sans-serif;
	color: white;
	opacity: 1;
	font-weight: 300;
}

body ::-moz-placeholder {
	/* Mozilla Firefox 19+ */
	font-family: 'Source Sans Pro', sans-serif;
	color: white;
	opacity: 1;
	font-weight: 300;
}

body :-ms-input-placeholder {
	/* Internet Explorer 10+ */
	font-family: 'Source Sans Pro', sans-serif;
	color: white;
	font-weight: 300;
}

.wrapper {
	background: #393D49 !important;
	background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
	background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
	opacity: 0.8;
	position: absolute;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.wrapper.form-success .container h1 {
	-webkit-transform: translateY(85px);
	-ms-transform: translateY(85px);
	transform: translateY(85px);
}

.container {
	max-width: 600px;
	margin: 0 auto;
	padding: 80px 0;
	height: 400px;
	text-align: center;
}

.container h1 {
	font-size: 40px;
	-webkit-transition-duration: 1s;
	transition-duration: 1s;
	-webkit-transition-timing-function: ease-in-put;
	transition-timing-function: ease-in-put;
	font-weight: 200;
}

.form {
	padding: 20px 0;
	position: relative;
	z-index: 2;
}

.form input {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	outline: 0;
	border: 1px solid rgba(255, 255, 255, 0.4);
	background-color: rgba(255, 255, 255, 0.2);
	width: 250px;
	border-radius: 3px;
	padding: 10px 15px;
	margin: 0 auto 10px auto;
	display: block;
	text-align: center;
	font-size: 18px;
	color: white;
	-webkit-transition-duration: 0.25s;
	transition-duration: 0.25s;
	font-weight: 300;
}

.form input:hover {
	background-color: rgba(255, 255, 255, 0.4);
}

.form input:focus {
	background-color: white;
	width: 300px;
	color: #53e3a6;
}

.form button {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	outline: 0;
	background-color: white;
	border: 0;
	padding: 10px 15px;
	color: #53e3a6;
	border-radius: 3px;
	width: 250px;
	cursor: pointer;
	font-size: 18px;
	-webkit-transition-duration: 0.25s;
	transition-duration: 0.25s;
}

.form button:hover {
	background-color: #f5f7f9;
}
</style>
</head>
<body>
	<!-- 代码 开始 -->
	<div class="wrapper">
		<div class="container">
			<h1>LanProxy.org</h1>

			<div class="form">
				<input type="text" class="username" placeholder="">
				<input type="password" class="password" placeholder="">
				<button type="submit" id="login-button"></button>
			</div>
		</div>
	</div>

	<script src="jquery/jquery-3.1.1.min.js" type="text/javascript"></script>
	<script src="jquery/jquery.i18n.properties.min.js" type="text/javascript"></script>
	<script>
		$('#login-button').click(function(event) {
			$.ajax({
				type : "POST",
				url : "/login",
				contentType : "application/json; charset=utf-8",
				data : JSON.stringify({
					username : $(".username").val(),
					password : $(".password").val()
				}),
				dataType : "json",
				success : function(data) {
					if (data.code == 20000) {
						setCookie("token", data.data);
						window.location.href = "/lanproxy-config/";
					}
				},
				error : function(e) {
					alert(e.responseJSON.message);
				}
			});
		});

		function setCookie(name, value) {
			var Days = 30;
			var exp = new Date();
			exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
			document.cookie = name + "=" + escape(value) + ";expires="
					+ exp.toGMTString();
		}

		$(document).keyup(function(event) {
			if (event.keyCode == 13) {
				$("#login-button").trigger("click");
			}
		});

		/**
		 * 设置语言类型： 默认为英文 
		 */
		var i18nLanguage = "en";

		/* 
		设置一下网站支持的语言种类 
		zh-CN(中文简体)、en(英语) 
		 */
		var webLanguage = [ 'zh-CN', 'en' ];

		function initWebLanguage() {
			var navLanguage = navigator.language;
			console.log("user set browser language is " + navLanguage);
			if (navLanguage) {
				var charSize = $.inArray(navLanguage, webLanguage);
				if (charSize > -1) {
					i18nLanguage = navLanguage;
				}
			}
		}

		initWebLanguage();

		jQuery.i18n.properties({
			name : 'lang', //资源文件名称
			path : '/i18n/', //资源文件路径
			mode : 'map', //用Map的方式使用资源文件中的值
			language : i18nLanguage,
			encoding: 'UTF-8',
			callback : function() {//加载成功后设置显示内容
				$('title').html($.i18n.prop('login')+" - LanProxy");
				$('#login-button').html($.i18n.prop('login'));
			    $(".username").attr("placeholder", $.i18n.prop('username'));
			    $(".password").attr("placeholder", $.i18n.prop('password'));
			}
		});
	</script>
	<!-- 代码 结束 -->

</body>
</html>